<div
#anchorRef
[style.left.px]="LogicApiGateway.options.X "
[style.top.px]="LogicApiGateway.options.Y"
>
    <template #conn></template>
    <div class="img-container"(mousedown)="handleMousedown( $event )" (touchstart)="handleMousedown($event)"
    (click)="handleClick($event)">
        <img src="./assets/apigateway.svg">
    </div>
</div>
<div style="display:none">
    <div #options>
        <!-- REST ENDPOINTS -->
        <div class="endpoint-select-container">
            <endpoint-select
                [Model]="LogicApiGateway"
                [Type]="APIType.REST"
                [Property]="'restEndpoints'"
                [Title]="'Endpoints (REST):'"
                [AfterChange]="afterChange"
                [HasStreamActions]="true"
                [ConnectableEndpoints]="connectableEndpoints"
                [ShowCounter]="true"
            ></endpoint-select>
        </div>
        <!-- REST ENDPOINTS -->

        <!-- RPC ENDPOINTS -->
        <div class="endpoint-select-container">
            <endpoint-select
                [Model]="LogicApiGateway"
                [Type]="APIType.RPC"
                [Property]="'rpcEndpoints'"
                [Title]="'Endpoints (RPC):'"
                [AfterChange]="afterChange"
                [HasStreamActions]="true"
                [ConnectableEndpoints]="connectableEndpoints"
                [ShowCounter]="true"
            ></endpoint-select>
        </div>
        <!-- RPC ENDPOINTS -->

        <!-- gRPC ENDPOINTS -->
        <div class="endpoint-select-container">
            <endpoint-select
                [Model]="LogicApiGateway"
                [Type]="APIType.gRPC"
                [Property]="'grpcEndpoints'"
                [Title]="'Endpoints (gRPC):'"
                [AfterChange]="afterChange"
                [HasStreamActions]="true"
                [ConnectableEndpoints]="connectableEndpoints"
                [ShowCounter]="true"
            ></endpoint-select>
        </div>
        <!-- gRPC ENDPOINTS -->

        <!-- GraphQL ENDPOINTS -->
        <div class="endpoint-select-container">
            <endpoint-select
                [Model]="LogicApiGateway"
                [Type]="APIType.GraphQL"
                [Property]="'graphqlEndpoints'"
                [Title]="'Endpoints (GraphQL):'"
                [AfterChange]="afterChange"
                [HasStreamActions]="true"
                [ConnectableEndpoints]="connectableEndpoints"
                [ShowCounter]="true"
            ></endpoint-select>
        </div>
        <!-- GraphQL ENDPOINTS -->

        <!-- WebSockets ENDPOINTS -->
        <div class="endpoint-select-container">
            <endpoint-select
                [Model]="LogicApiGateway"
                [Property]="'websocketsEndpoints'"
                [Type]="APIType.WebSockets"
                [Title]="'Endpoints (WebSockets):'"
                [AfterChange]="afterChange"
                [HasStreamActions]="true"
                [ConnectableEndpoints]="connectableEndpoints"
                [ShowCounter]="true"
            ></endpoint-select>
        </div>
        <!-- WebSockets ENDPOINTS -->
    </div>
    <div #simulations>
        <slider-described
        [Model]="LogicApiGateway"
        [AfterChange]="afterChange"
        ></slider-described>
    </div>
</div>
